<template>
	<view class="collectmianbox">
		<qi_navigation :navzuoicof="'icon-icon-test59'"></qi_navigation>
		<scroll-view scroll-y class="scroll">
			<view
				v-for="(item, i) in deta.collectdata"
				:key="i"
				class="collgoods"
			>
				<view>
					<image
						mode="widthFix"
						:src="item.goods.cover_url"
						@tap="Tapclickdeta(item)"
					></image>
				</view>
				<view class="collcenten">
					<view class="colltitle">
						<text>{{ item.goods.title }}</text>
					</view>
					<view class="collprice">
						<text>${{ item.goods.price }}</text>
						<text>{{ item.updated_at }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
import { getcollects } from '@/http/api.js';
import { onMounted, reactive } from 'vue';
const deta = reactive({
	collectdata: []
});
onMounted(() => {
	getcollects().then(res => {
		deta.collectdata = res.data;
		console.log(deta.collectdata);
		console.log(res);
	});
});
const Tapclickdeta = id => {
	console.log(id.goods.id);
	uni.navigateTo({
		url: '/pages/cate/childer/details/details?id=' + id.goods.id
	});
};
</script>

<style lang="scss">
.collectmianbox {
	position: relative;
	height: 100vh;
	.scroll {
		height: calc(100vh - 50px);
		.collgoods {
			display: flex;
			image {
				// height: 100px;
				width: 150px;
			}
			padding: 10px;
		}
		.collcenten {
			display: flex;
			flex: 1;
			flex-direction: column;
			justify-content: space-between;
			padding-left: 10px;
		}
		.colltitle {
		}
		.collprice {
			display: flex;
			flex-direction: row;
			width: 100%;
			justify-content: space-between;
			text:first-child {
				color: red;
			}
		}
	}
}
</style>
